<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>接口测试</title>
		<style>
			#lists .list-item {
				background-color: aliceblue;
				margin: 5px 0;
				padding: 5px 10px;
				list-style-type: none;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<span>地址</span>
				<span><input type="text" name="host" value="http://localhost:3000" placeholder="" id="host" /></span>
			</div>
			<div>
				<span>参数</span>
				<span><input type="text" name="params" value="/api/data" placeholder="" id="params" /></span>
			</div>
			<div>
				<span>请求类型</span>
				<span><input type="text" name="dataType" value="jsonp" placeholder="" id="dataType" /></span>
			</div>
			<div>
				<span>请求类型</span>
				<span><input type="checkbox" name="jumpType" checked placeholder="" id="jumpType" />URL跳转方式</span>
			</div>
			<button type="button" onclick="addItemHandle()">生成</button>
			<button type="button" onclick="hideIframeHandle()" id="btnHideIframe">显示iframe</button>
		</div>
		<br />
		<div>
			<ul id="lists"></ul>
		</div>

		<iframe src="" id="iframe" frameborder="0" width="500" height="300"></iframe>
		<script src="./jquery-3.7.1.min.js"></script>
		<script>
			var isHideIframe = true;

			function addItemHandle() {
				const host = $('#host').val();
				const params = $('#params').val();
				const dataType = $('#dataType').val();
				const jumpType = $('#jumpType').is(':checked');
				const url = host + params;

				const li = document.createElement('li');
				li.className = "list-item"


				if (jumpType) {
					li.textContent = "url方式：  "
					const a = document.createElement('a');
					a.href = url;
					a.text = url;
					a.target = -"_blank"
					li.appendChild(a);
					$('#lists').append(li)
				} else {
					li.textContent = " "
					const span = document.createElement('span');
					span.textContent = url;
					li.appendChild(span);
					$('#lists').append(li)
				}
			}

			function testHandleClick() {
				const host = $('#host').val();
				const params = $('#params').val();
				const dataType = $('#dataType').val();
				const url = host + params;

				alert(url)
				$.ajax({
					url: url, // JSONP 接口 URL
					dataType: dataType, // 设置为 JSONP
					jsonpCallback: "processData", // 自定义回调函数名

					success: function(data) {
						// 请求成功时的处理函数
						console.log("Data:", data);
						$("#result").text("Received data: " + JSON.stringify(data));
					},
					error: function(xhr, status, error) {
						// 请求发生错误时的处理函数
						console.error("Error:", error);
					}
				})
			}

			// 自定义回调函数
			function processData(data) {
				// 在这里对返回的数据进行处理
				console.log("Processing data:", data);
			}

			// $('#lists').on('click', '.list-item a', function(ev){
			// 	// ev.preventDefault()
			// 	// ev.stopPropagation()
			// 	alert(666)
			// })

			$('#lists').on('click', '.list-item span', function(ev) {
				const host = $('#host').val();
				const params = $('#params').val();
				const dataType = $('#dataType').val();
				const url = host + params;

				// $.ajax({
				// 	url: url, // JSONP 接口 URL
				// 	dataType: 'JSONP', // 设置为 JSONP
				// 	jsonpCallback: "processData", // 自定义回调函数名

				// 	success: function(data) {
				// 		// 请求成功时的处理函数
				// 		console.log("Data:", data);
				// 		$("#result").text("Received data: " + JSON.stringify(data));
				// 	},
				// 	error: function(xhr, status, error) {
				// 		// 请求发生错误时的处理函数
				// 		console.error("Error:", error);
				// 	}
				// })
				$('#iframe').attr('src', url)

				if (isHideIframe) {
					$('#iframe').attr('style', 'display: none')
				} else {
					$('#iframe').attr('style', 'display: block')
				}
			})

			function hideIframeHandle() {
				isHideIframe = !isHideIframe;

				if (isHideIframe) {
					$('#iframe').attr('style', 'display: none')
					$('#btnHideIframe').text("显示iframe")
				} else {
					$('#iframe').attr('style', 'display: block')
					$('#btnHideIframe').text("隐藏iframe")
				}
			}
		</script>
	</body>
</html>